<template>
  <common-card title="今日累计用户数" :value="numberFormat(usersTotal)">
    <v-chart :option="getOption()" autoresize></v-chart>

    <template #bottom>
      <div class="compare-wrap">
        <div class="compare-wrap">
          <div class="compare">
            <div>日同比</div>
            <div class="number">{{ userGrowthLastDay }}%</div>
            <div :class="+userGrowthLastDay! > 0 ? 'increment' : 'decrement'"></div>
          </div>
          <div class="compare">
            <div>月同比</div>
            <div class="number">{{ userGrowthLastMonth }}%</div>
            <div :class="+userGrowthLastMonth! > 0 ? 'increment' : 'decrement'"></div>
          </div>
        </div>
      </div>
    </template>
  </common-card>
</template>
<script lang="ts">
export default {
  name: "TotalUsers",
};
</script>
<script lang="ts" setup>
import useFormat from "../../../hooks/useFormat";
import { useDataStore } from "../../../stores/reportData";
import { computed } from "vue";
// 格式化数字的方法
const { numberFormat } = useFormat();
// 获取数据的仓库
const dataStore = useDataStore();

// 从仓库中获取数据
const usersTotal = computed(() => dataStore.reportData.usersTotal);
const usersLastDay = computed(() => dataStore.reportData.salesLastDay);
const usersLastMonth = computed(() => dataStore.reportData.usersLastMonth);
const userGrowthLastDay = computed(() => dataStore.reportData.userGrowthLastDay);
const userGrowthLastMonth = computed(() => dataStore.reportData.userGrowthLastMonth);

//可视化需要的数据
const getOption = () => {
  return {
    // 纵轴
    xAxis: { show: false, min: 0, max: usersTotal.value },
    yAxis: { show: false, type: "category" },
    // 系列数组数据
    series: [
      {
        type: "bar",
        data: [(usersTotal.value as number) - (usersLastMonth.value as number)],
        showBackground: true,
        itemStyle: { color: "yellowgreen" }, //柱条的颜色
        barWidth: 10, //柱条的宽度
        label: {
          show: true,
          formatter: "|",
          color: "red",
          position: "right",
        },
      },
    ],
    grid: { left: 0, top: 0, right: 0, bottom: 0 },
    tooltip: {
      trigger: "axis",
    },
  };
};
</script>
<style lang="scss" scoped>
.compare-wrap {
  height: 100%;
  display: flex;
  flex-direction: row;
  color: #666;
  font-weight: 600;
  font-size: 12px;
  .compare {
    display: flex;
    flex: 1;
    align-items: center;
  }
}
</style>
